<template>
<div class="wrap" :style="{ width:width, background: back}">
  <div class="left">
    <div class="title">{{title}}</div>
    <div class="people"><span>{{num || 0}}</span><span>{{unit}}</span></div>
  </div>
  <div class="right">
    <img :src="img" alt="">
  </div>
</div>
</template>

<script>
export default {
  props: {
    num: [String, Number],
    img: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    back: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '24%'
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.wrap {
  // width:24%;
  margin-top: 10px;
  border-radius: 8px;
  color: #FFFFFF;
  height: 102px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 70%;
    .title {
      margin-top: 20px;
      margin-left: 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
    .people {
      margin-top: 10px;
      margin-left: 15px;
      >span:nth-child(1) {
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    >img {
      display: block;
      width: 70px;
      height: 80px;
    }
  }
}
</style>
